<template>
    <el-tree
        :class="['treeclass ' + className]"
        ref="tree"
        :data="treeDataNew"
        default-expand-all=""
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
        @node-click="nodeclick"
        @check-change="handleClick"
        :check-strictly="checkStrictly"
        node-key="id"
        :default-expand-all="defaultExpandAll"
        :show-checkbox="showSheckbox">
    </el-tree>
</template>
<script>
// https://element.eleme.cn/2.9/#/zh-CN/component/tree#scoped-slot
import {ModuleGet} from "@/api/userMG";

export default {
  name: 'treeModule', // Tree 树形控件
  props: {
      treeData:  {
          type: Array,
          default () {
              return []
          }
      },
      defaultProps:  {
          type: Object,
          default () {
              return {}
          }
      },
      className:{
          type: String,
          default: ''
      },
      checkStrictly: {
          type: Boolean,
          default: false
      },
      showSheckbox: {
          type: Boolean,
          default: false
      },
      // 是否默认展开所有节点
      defaultExpandAll: {
        type: Boolean,
        default: true
      },
      // 默认选中的节点
      defaultCheckedKeys:  {
        type: Array,
        default () {
          return []
        }
      },
  },
  data(){
      return{
        treeDataNew: [],
      }
  },
  created() {
    const arr = this.treeData
    this.treeDataNew = this.buildTree(arr)
    // console.log('this.treeDataNew',this.treeDataNew)
  },
  methods: {
      nodeclick(arr) {
        const vm = this
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([arr])
        vm.$emit('nodeclick', arr)
      },
      // 复选变单选
      handleClick(data, checked, self) {
        console.log('data', data)
        if (checked) {
          this.$refs.tree.setCheckedNodes([])
          this.$refs.tree.setCheckedNodes([data])
          this.$emit('handleClick',data, checked)
        }
        // this.$emit('handleClick',data, checked)
      },
      buildTree(list, idStr='id' ,pidStr='pId'){
        let childStr = 'child';

        let listOjb = {}; // 用来储存{key: obj}格式的对象
        let treeList = []; // 用来储存最终树形结构数据的数组

        // 将数据变换成{key: obj}格式，方便下面处理数据
        for (let i = 0; i < list.length; i++) {
          listOjb[list[i][idStr]] = list[i]
          // console.log('list[i]',list[i])
        }

        for (let j = 0; j < list.length; j++) {
          // 判断父级是否存在
          let haveParent = listOjb[list[j][pidStr]]
          if (haveParent) {
            // 如果有没有父级child字段，就创建一个child字段
            !haveParent[childStr] && (haveParent[childStr] = [])
            // 在父级里插入子项
            haveParent[childStr].push(list[j])
          } else {
            // 如果没有父级直接插入到最外层
            treeList.push(list[j])
          }
        }
        return treeList
      },
      //清空选中
      clearHandle() {
        const vm = this
        this.$refs.tree.setCheckedNodes([])
        // vm.$emit('nodeclick', [])
      },
  }
}
</script>
<style lang="less" scoped>
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
